<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="first"></div>
	<input type="text" id="input" name="">
	<textarea id="textarea"></textarea>
</body>
<script type="text/javascript">
	var div = document.getElementById("first");
	var input = document.getElementById("input");
	// 鼠标事件
	div.onclick = function(){
		console.log("点击事件");
	}
	div.ondblclick = function(){
		console.log("双击事件");
	}
	div.onmousemove = function(){
		console.log("鼠标移动事件");
	}
	div.onmouseover = function(){
		console.log("鼠标移入事件");
	}
	div.onmouseenter = function(){
		console.log("鼠标移入事件");
	}
	div.onmouseout = function(){
		console.log("鼠标移出事件");
	}
	div.onmouseleave = function(){
		console.log("鼠标移出事件");
	}
	div.oncontextmenu = function(){
		console.log("鼠标右击事件");
	}
	div.onmousedown = function(){
		console.log("鼠标按下事件");
	}
	div.onmouseup = function(){
		console.log("鼠标抬起事件");
	}
	// 键盘事件
	// div不能绑定键盘事件，document和input可以绑定（一般能聚焦的元素都可以触发键盘事件）
	document.onkeydown = function(){
		console.log("按下了键盘");
	}
	document.onkeyup = function(){
		console.log("抬起了键盘");
	}
	document.onkeypress = function(){
		console.log("按下了键盘-press");
	}
</script>
</html>